<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 

     -->
</head>
<body>
    <div id="root"></div>
    <script>
        // 使用vue.createApp就是创建一个vue应用,app.mount就是就是这个实例只应用到id为root的结点上面
        /**
         *  传入的参数,表示这个应用最外层的组件该如何展示,
         *  这里vue实例参考的是mvvm设计模式, m->model 数据,v->view视图,vm->表示viewModel视图数据连接层
         *  数据使我们自己写的,视图也是我们定义的,但是视图数据连接层不是我们操作的,而是vue的组件帮我们做的
         * 
         * **/
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            template: `
             {{message}}
            `
        });
    // 将创建的vue组件挂载到结点上,此时返回的值,就是vue应用的根组件
    const vm =  app.mount('#root');

    </script>
</body>
</html>